<template>
	<view class="content">
		<view class="headbox">
			<view v-for="(item, index) in tabList" :key="index" class="headli" :class="{active: currentIndex === index}"
				@click="switchTab(index)">
				{{ item }}
				<view class="indicator" :class="{active: currentIndex === index}">
				</view>
			</view>
		</view>

		<view class="showbox" v-for="item,index in lists">

			<view class="showbox_info">
				<view class="order_img">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="order_info">
					<view class="order_info1 fonts1"> {{item.goodname}} </view>
					<view class="order_info2 fonts1"> <text>卖家</text> 王海{{item.salename}} {{item.salemobile}} </view>
					<view class="order_info2 fonts1"> <text>买家</text> {{item.buyusername}} {{item.buymobile}} </view>
					<view class="order_info3"> {{item.addtime}}  </view>
				</view>
			</view>
			<view class="showbox_set">
				<view>
					<view class="showset">金额:<text> {{item.money}} </text> </view>
					<!-- <view class="showset">今日利润:<text>12</text></view> -->
					<!-- <view class="showset">服务费:<text>12</text></view> -->
				</view>
				<view class="showbox_setr">
					<view class="showseti" v-if="item.status!=2" :data-i="index" @click="seeimage">收款码</view>
					<view class="showseti" v-if="item.status!=2" :data-id="item.id" @click="showUploadModal">上传凭证</view>
					
				</view>
				
			</view>
		</view>

		<view class="nolist" v-if="lists.length<1">
			<image src="/static/nolist.png" mode=""></image>
		</view>

		<!-- 上传图片弹窗 -->
		<view class="modal" v-if="showModal">
			<view class="modal-mask" @click="closeModal"></view>
			<view class="modal-container">
				<view class="modal-header">
					<text class="modal-title">上传凭证</text>
					<view class="modal-close" @click="closeModal">✕</view>
				</view>
				<view class="modal-content">
					<view class="upload-area" v-if="!imagePreview" @click="chooseImage">
						<view class="upload-icon">📁</view>
						<text class="upload-text">点击选择图片</text>
					</view>
					<view class="preview-area" @click="chooseImage" v-if="imagePreview">
						<image :src="imagePreview" class="preview-image" mode="aspectFit"></image>
					</view>
				</view>
				<view class="modal-footer">
					<button class="cancel-btn" @click="closeModal">取消</button>
					<button class="confirm-btn" @click="uploadImage" :disabled="!imagePreview">上传</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import { baseUrl } from "../../common/config.js";
	import { curl } from '../../common/api.js';
	export default {
		data() {
			return {
				currentIndex: 0,
				tabList: ['待付款', '待确认', '已完成'],
				lists: [],
				showModal: false,
				imagePreview: '',
				imagePath: '',
        id:''
			}
		},
		onLoad() {
			this.getorderlist();
		},
		methods: {
			
			seeimage(ret){

				var index=ret.currentTarget.dataset.i;
				
				var lists=this.lists;

        var image=lists[index].payimg;

        console.log(image);

        uni.previewImage({
          current: image[0], // 当前显示图片的http链接
          urls: image // 需要预览的图片http链接列表
        });
				
			},
			
			getorderlist(){
				var status=this.currentIndex;
				
				var that = this;
				curl('merch/getorderlist', {status:status}).then((res) => {
					console.log(res.data);
					that.lists = res.data
				});
				
				
				
			},
			
			switchTab(index) {
				this.currentIndex = index;

        this.getorderlist();
			},
			showUploadModal(ret) {
				this.showModal = true;

        this.id=ret.currentTarget.dataset.id;

			},
			closeModal() {
				this.showModal = false;
				this.imagePreview = '';
				this.imagePath = '';
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.imagePreview = res.tempFilePaths[0];
						this.imagePath = res.tempFilePaths[0];
					}
				});
			},
			uploadImage() {
				if (!this.imagePath) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					});
					return;
				}


        var that=this;

				var token = uni.getStorageSync('token');
				uni.showLoading({
					title: '上传中...'
				});

				uni.uploadFile({
					url: `${baseUrl}common/upload`,
					filePath: this.imagePath,
					name: 'file',
					header: {
						"token": token
					},
					success: (uploadFileRes) => {
						uni.hideLoading();
						var data = JSON.parse(uploadFileRes.data);
						if (data.code === 1) {
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							});
							// 上传成功后关闭弹窗
							this.closeModal();
							// 这里可以添加上传成功后的处理逻辑
							console.log('上传的图片地址:', data.data.fullurl);

              that.setorerpayimg(data.data.fullurl);



						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						});
					}
				});
			},

      // 修改状态
      setorerpayimg(img){
        var that=this;
        var oid=this.id;

        curl('merch/setorerpayimg', {id:oid,img:img}).then((res) => {

          if(res.code==1){
            uni.showToast({
              title: '修改成功',
              icon: 'success'
            });

            that.getorderlist();

          }else{
            uni.showToast({
              title: '修改失败',
              icon: 'none'
            });
          }

        })




      }



		}
	}
</script>

<style>
	
	.showbox_setr{
		display: flex;
	}
	.showseti {
		width: auto;
		height: 40rpx;
		margin-left: 20rpx;
		padding: 0px 5px;
		text-align: center;
		background: green;
		color: #ffffff;
		font-size: 22rpx;
		line-height: 40rpx !important;
		border-radius: 10rpx;
		cursor: pointer;

	}

	.showset>text {
		color: orangered;
		font-weight: bold;
	}

	.showset {
		margin-left: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
	}

	.showbox_set {
		width: 680rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.order_info3 {
		height: 40rpx;
		line-height: 45rpx;
		font-size: 26rpx;
		color: #666;
		font-weight: 500;
	}

	.order_info2 {
		height: 35rpx;
		line-height: 35rpx;
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}

	.order_info1 {
		height: 40rpx;
		line-height: 35rpx;
		font-size: 30rpx;
		color: #333333;
		font-weight: 500;
	}

	.order_info {
		width: 510rpx;
		height: 150rpx;
		margin-left: 10rpx;
	}

	.order_img>image {
		width: 140rpx;
		height: 140rpx;
    border-radius: 10rpx;
	}

	.order_img {
		width: 140rpx;
		height: 140rpx;
		margin-left: 10rpx;
	}

	.showbox_info {
		width: 680rpx;
		height: 180rpx;
		margin: auto;
		border: 1px solid transparent;
		display: flex;
		align-items: center;
	}

	.showbox {
		width: 700rpx;
		height: 250rpx;
		margin: 20rpx auto;
		background: #ffffff;
		border-radius: 20rpx;
	}

	.headli {
		width: 200rpx;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #555555;
		position: relative;
		cursor: pointer;
		transition: color 0.3s ease;
	}

	.headli.active {
		color: #333333 !important;
		font-weight: bold;
	}

	.headbox {
		width: 710rpx;
		height: 100rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.indicator {
		width: 70rpx;
		height: 8rpx;
		background: rgb(52, 178, 250);
		position: absolute;
		bottom: 2rpx;
		right: 50%;
		margin-right: -35rpx;
		border-radius: 8rpx;
		transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
		opacity: 0;
		transform: scale(0.8);
	}

	.indicator.active {
		opacity: 1;
		transform: scale(1);
	}

	.content {
		width: 100%;
		min-height: 100vh;
		background: #fafafa;
	}

	/* 弹窗样式 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}

	.modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.modal-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		background: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.modal-close {
		font-size: 36rpx;
		color: #999;
		cursor: pointer;
	}

	.modal-content {
		padding: 30rpx;
		min-height: 300rpx;
	}

	.upload-area {
		border: 2rpx dashed #ddd;
		border-radius: 10rpx;
		padding: 50rpx 0;
		text-align: center;
		cursor: pointer;
	}

	.upload-icon {
		font-size: 60rpx;
		margin-bottom: 20rpx;
	}

	.upload-text {
		font-size: 28rpx;
		color: #666;
	}

	.preview-area {
		margin-top: 30rpx;
		text-align: center;
	}

	.preview-image {
		width: 200rpx;
		height: 200rpx;
		margin: 0 auto;
	}

	.modal-footer {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #eee;
	}

	.cancel-btn,
	.confirm-btn {
		flex: 1;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.cancel-btn {
		background: #f5f5f5;
		color: #666;
		margin-right: 20rpx;
	}

	.confirm-btn {
		background: #007AFF;
		color: #fff;
		margin-left: 20rpx;
	}

	.confirm-btn[disabled] {
		background: #ccc;
	}
</style>